<template>
  <!-- 持久化：
       1：值修改了存储到浏览器
       2：初始值读取浏览器存储
       js-cookie:操作cookie
       下载导入js-cookie  import JsCookie from 'js-cookie'
        JsCookie.get      ===>localStorage.getItem
        JsCookie.set      ===>localStorage.setItem
        JsCookie.remove   ===>localStorage.removeItem
 -->
  <div>
    <h2>{{ num }}</h2>
    <button @click="setNum">修改</button>
  </div>
</template>
<script>
import JsCookie from 'js-cookie'
export default {
  data() {
    return {
      // num: +localStorage.getItem('num') || 1
      num: +JsCookie.get('num') || 1
    }
  },
  methods: {
    setNum() {
      this.num++
      // localStorage.setItem('num', this.num)
      JsCookie.set('num', this.num)
    }
  }
}
</script>
<style>
</style>
